<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品卡片布局</title>
		<style>
			/* 思路：1.去除元素默认外边距【通配选择器】 设置背景颜色 
			         2.product_card设置样式：内边距 边框设置颜色 加倒角
					 加阴影，所有内容都---居中  text-align：center
					 3.图片边框倒角，外边距
					 4.小米su7 文字：外边距
					 5.￥279999.00文字大小，16px  外边距？
					 6.颜色
			*/
		 #product_card{
			 border: 1px solid transparent;
			 width: 360px;
			 height: 600px;
			 background: #fff;
			 box-shadow: 5px 5px 10px 10px #cdc8c7;
		 }
		 img{
			 border: 1px solid transparent;
			 padding: 10px 50px 100px;
			 border-radius: 15%;
			/* box-shadow: 5px 5px 10px 10px #cdc8c7 ; */
			 text-align: center;
		 }
		 h3{
			text-align: center;
			margin-top: -43px;
		 }
		 #p1{
			text-align: center;
			 font-size: 16px;
			 color: red;
		 }
		 #p2{
			 text-align: center;
			 color: #cdc8c7;
		 }
		 input{
			 margin-top: 0px;
			 border: 1px solid transparent;
			 width: 150px;
			 height: 30px;
		 }
		 #d1{
			 border: 1px solid transparent;
			 width: 200px;
			 height: 35px;
			 margin-top: 50px;
			 box-shadow: 5px 5px 10px #cdc8c7;
		 }
		 #p3{
			 color: #c9c9c9;
			 margin-top: -26px;
			 margin-left: 20px;
			 font-size: 10px;
		 }
		 #d2{
			 border: 1px solid red;
			 width: 40px;
			 height: 20px;
			 background: red;
			 margin-top: -27px;
			 margin-left: 156px;
			 border-radius: 10%;
		 }
		 #p4{
			 margin-top: 0px;
			 margin-left: 7px;
			 color: #ffffff;
			 font-size: 13px;
		 }
		 #c1{
			 margin-top: 50px;
			 border: 1px solid green;
			 width: 500px;
			 height: 100px;
		 }
		 #c3{
			 margin-top: 40px;
			 margin-left: 50px;
			 border: 1px solid green;
			 width: 400px;
			 height: 0px;
		 }
		 #pages{
			 width: 500px;
			 margin-top: 10px;
		 }
		 #pages a{
			 /* 加外边框：内边距 */
			 border: 1px solid #ddd;
			 padding: 4px 10px;
			 border-radius: 5px;
			 margin-right: 6px;
		 }
		#pages a.a1{
			 border: 1px solid transparent;
			 color: black;
			 text-decoration: none;
		 }
		 i.i1{
			 display: block;
			 width: 75px;
			 height: 16px;
			border: 1px solid transparent;
			pad ding: 0px 30px;
			background-image: url(img/c1fa622d03f0bca378417e5a9026cdf.jpg);
			background-position: -138px -238px;
		 }
		</style>
	</head>
	<body>
		<div id="product_card">
			<img src="img/su7.jpg" width="260px" height="358px" alt="su7">
			<h3>小米su7</h3>
			<p id="p1">￥279999.00</p>
			<p id="p2">已有<span>10万+</span>人评价</p>
		</div>
		
		<div id="d1">
			<!-- 精灵图：将小图标导出成1张矢量图【png】好处：图片名称不用起，服务器压力小-->
			<input type="text" />
			<p id="p3"> 搜索 <span>京东商品</span></p>
			<div id="d2">
				<p id="p4">搜索</p>
			</div>
		</div>
		
		<div id="c1">
			<i class="i1"></i>
			<div id="c3"></div>
		</div>
	<div id="pages">
	<a href="#" class="a1">1</a>
	<a href="#">2</a>
	<a href="#">3</a>
	<a href="#">4</a>
	<a href="#">5</a>
	<a href="#">6</a>
	</div>
	</body>
</html>